<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>新用户开卡</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div>
    <div>
        <!-- 验证身份证的form表单 -->
        <div id="idCard" style="display:block;">
            <form class="layui-form" action="" style="margin:4% 20%;">
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号码:</label>
                    <div class="layui-input-block">
                        <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off"
                               class="layui-input"
                               style="display: inline-block;width:70%">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="Verification">提交验证</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 输入SIM卡号和选取电话号码 -->
        <div id="SIM" style="display: none;">
            <form class="layui-form" action="" style="margin:4% 20%;">
                <div class="layui-form-item">
                    <label class="layui-form-label">SIM卡号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="SIM" lay-verify="SIM" placeholder="" autocomplete="off"
                               class="layui-input"
                               style="display: inline-block;width:70%">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="lookup">查找卡号</button>
                    </div>
                </div>
            </form>
            <table id="PhoneNumber" lay-filter="PhoneNumber"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<!-- 验证身份证号码的js -->
<script type="text/javascript" src="../static/js/idCard.js" th:src="@{/js/idCard.js}"></script>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            table = layui.table;
        //身份证号码
        var idCard;
        //电话号码id
        var id;
        //SIM卡号
        var SIM;
        //自定义验证规则
        form.verify({
            identity: function (value) {
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入身份证号码';
                }
                if (str.length != 15 && str.length != 18) {
                    return '输入的身份证号码必须为15或18位';
                }
                if (IdentityCodeValid(str) != true) {
                    return '输入的身份证有误!';
                }
            },
            SIM: function (value) {
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入SIM卡号';
                }
            }
        });
        //监听提交---点击验证按钮触发---验证身份证是否为真
        form.on('submit(Verification)', function (data) {
            console.log(data.field.identity);
            idCard=data.field.identity;
            //最终的提交信息---身份证号码在data.field.identity中
            $.ajax({
                type: 'GET', //提交方式
                url: '/yidCard', //地址
                data: {
                    identity: data.field.identity
                }, //传输的数据
                dataType: 'json', //传输的数据类型
                success: function (data) {
                    //数据成功
                    if (data == '200') {
                        layer.msg('身份证验证成功!');
                        document.getElementById('idCard').style.display = 'none';
                        document.getElementById('SIM').style.display = 'block';
                        //数据表单
                        table.render({
                            elem: '#PhoneNumber'
                            , height: 312
                            , url: '/ApiResult' //数据接口
                            , page: true //开启分页
                            , cols: [
                                [ //表头
                                    {field: 'id', title: 'id', width: 250}
                                    , {field: 'phone', title: '电话号码', width: 300}
                                    , {field: 'huafei', title: '预存话费', width: 300}
                                    , {field: 'di', title: '月保底', width: 300}
                                ]
                            ]
                        });
                        return;
                    } else if (data == '505') {
                        layer.msg('身份证验证失败!');
                        return;
                    }
                },
                error: function (data) {
                    //出现错误
                    layer.msg('出现了错误请重试!')
                }
            })
            return false;
        });
        //监听行双击事件（单击事件为：row）
        table.on('rowDouble(PhoneNumber)', function (obj) {
            //data是拿到当前行的数据
            var data = obj.data;
            //示范一个公告层
            layer.open({
                type: 1,
                title: "订单" //不显示标题栏
                ,
                closeBtn: false,
                area: '500px;',
                shade: 0.8,
                id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,
                btnAlign: 'c',
                moveType: 1 //拖拽模式，0或者1
                ,
                content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><label class="layui-form-label" style="background-color: #000000;">真实姓名</label><div class="layui-input-inline" style="width:260px"><input type="text" name="username" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">身份证号码</label><div class="layui-input-block" style="width:260px"><input type="text" name="idCard" id="idCard" lay-verify="required" placeholder="请输入身份证号码" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">电话号码</label><div class="layui-input-block" style="width:260px"><input type="text" name="phone" lay-verify="required" id="phone" placeholder="请输入电话号码" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">预存缴费</label><div class="layui-input-block" style="width:260px"><input type="text" name="prestorage" lay-verify="required" id="prestorage" placeholder="请输入预存缴费" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">月租</label><div class="layui-input-block" style="width:260px"><input type="text" name="monthlyrent" lay-verify="required" id="monthlyrent" placeholder="请输入月租" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><button type="submit" class="layui-btn" lay-submit="" lay-filter="order">立即提交</button><a class="layui-layer-close layui-layer-closetrue layui-btn">取消</a></div></form></div>',
                success: function(layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.layui.com/',
                        target: '_blank'
                    });
                }
            });
            //这个data中包含了id、电话号码、预存缴费、月租
            // layer.alert(JSON.stringify(data), {
            //     title: '当前行数据：'
            // });
            //document.getElementsByName('username')[0].value=data.username;
            id=data.id;
            document.getElementsByName('idCard')[0].value=idCard
            document.getElementById('phone').value=data.phone;
            document.getElementById('prestorage').value=data.huafei;
            document.getElementById('monthlyrent').value=data.di;
        });
        $('#layerDemo .layui-btn').on('click', function() {
            var othis = $(this),
                method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        //监听提交--立即提交按钮--提交订单的
        form.on('submit(order)', function(data) {
            data.field["id"]=id;
            data.field["SIM"]='先随便填的一个';
            // var is=layer.alert(JSON.stringify(data.field), {
            // 	title: '最终的提交信息'
            // })
            //名字,身份证,电话,预存,月租
            //username,idCard,phone,prestorage,monthlyrent
            $.ajax({
                type: 'GET', //提交方式
                url: '/order', //地址
                data: {
                    username:data.field.username,
                    idCard:idCard,
                    phone:data.field.phone,
                    prestorage:data.field.prestorage,
                    monthlyrent:data.field.monthlyrent,
                    id:data.field.id,
                    SIM:data.field.SIM
                }, //传输的数据
                dataType: 'json', //传输的数据类型
                success:function (data) {
                    if(data=='200'){
                        layer.msg("办卡成功!");
                        layer.close(layer.index);
                        window.history.go(-1);
                    }else{
                        layer.msg("办卡失败,请重试!");
                    }
                },
                error:function () {
                    layer.msg("出现了错误,请重试!");
                }
            })

            return false;
        });
        //监听提交---点击查找按钮触发---验证SIM卡号是否存在
        form.on('submit(lookup)', function (data) {
            console.log("SIM:" + data.field.SIM)
            SIM=data.field.SIM;
            $.ajax({
                type: 'GET', //提交方式
                url: '/SIM', //地址
                data: {
                    SIM: data.field.SIM
                }, //传输的数据
                dataType: 'json', //传输的数据类型
                success: function (data) {
                    if (data == '200') {
                        layer.msg('该SIM卡号可用');
                    } else if (data == '400') {
                        layer.msg('该SIM卡号已经使用，不可用！');
                    }
                },
                error: function () {
                    layer.msg('出现了错误，请重试!');
                }
            })
        })
    })
</script>
</body>
</html>